<!DOCTYPE html>
<html lang="en"> <!-- Set this to the main language of your site -->
<head>
    <!-- Define the page charset to be utf-8 -->
    <meta charset="utf-8">

    <title><!-- Enter page title here --></title>

    <!-- Enter a brief description of your page -->
    <meta name="description" content="">

    <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width,
    and setting the initial page zoom level to be 1 (initial-scale=1.0), and fixing width=device-width for iOS9 (shtink-to-fit=no) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <!-- Add normalize.css which enables browsers to render all elements more consistently and in line with modern standards as it only targets particular styles that need normalizing -->
    <link href="css/normalize.css" rel="stylesheet" media="all">

    <!-- Include the site stylesheet -->
    <link href="css/styles.css" rel="stylesheet" media="all">

    <!-- Include the HTML5 shiv and shiv print polyfills for Internet Explorer browsers 8 and below -->
    <!--[if lt IE 9]><script src="js/html5shiv-printshiv.js" media="all"></script><![endif]-->
</head>
<body>

    <!-- This audio element tells the browser to display the default control set and to only preload the audio's metadata (e.g. video duration) -->
    <audio id="audio" controls preload="metadata">
        <!-- Provide multiple audio sources for cross-browser support -->

        <!-- MP3 source for Chrome, Safari, IE9+, iOS and Android 2.3+
        NOTE: For Android 2.2 support see below -->
        <source src="url-to-audio.mp3" type="audio/mp3">

        <!-- Ogg source for Firefox, Chrome and Opera -->
        <source src="url-to-audio.ogg" type="audio/ogg">

        <!-- Provide a Flash fallback for browsers that don't support HTML5 audio, e.g. Internet Explorer 6-8.
        This uses the JW Player Flash Player to play the MP4 file. Set the height and width attributes to the correct values. -->
        <object type="application/x-shockwave-flash" data="player.swf" height="24" width="320">
            <param name="movie" value="player.swf" />
            <param name="flashvars" value="file=url-to-audio.mp3" />
        </object>

        <!-- Add a downloadable link for users who do not have a HTML5 audio capable browser, nor Flash installed
        NOTE: This link will be displayed even if the user has Flash installed -->
        <a href="url-to-audio.mp3">Download MP3 audio</a>
    </audio>

    <!-- Use this if you need to support Android 2.2 devices -->
    <!-- Android 2.2 supports the audio tag but none of the codecs. However an MP3 file can be played in the video tag, although it does go to fullscreen mode. This is a possible workaround if Android 2.2 support is required -->
    <!--
    <video id="video" controls>
        <source src="url-to-audio.mp3">
    </video>
    -->

    <!-- The main page footer can contain items such as copyright and contact information. It can also contain a duplicated navigation of your site which is not usually contained within a <nav> -->
    <!-- ARIA: the landmark role "contentinfo" is added here as it contains metadata that applies to the parent document -->
    <footer role="contentinfo">

        <!-- The <address> element contains contact information for the nearest <article> or <body> element. This example is for the <body> -->
        <address>
          <p>For further information, please contact <a href="mailto:admin@example.com">Max Mustermann</a>.</p>
        </address>

        <!-- Copyright information can be contained within the <small> element. The <time> element is used here to indicate that the '2018' is a date -->
        <small>Copyright &copy; <time>2018</time></small>

    </footer>

    <!-- Required to initiate audio play in Android -->
    <script>
        // Use browser sniffing to check if it's a pre Android 4 device (some say browser sniffing is bad - but I think it's appropriate here)
        var isPreAndroid4 = parseInt(navigator.userAgent.slice(navigator.userAgent.toLowerCase().indexOf('android')+8)) < 4;

        // If this is a pre Android 4 device, then add a click handler to play the audio and video when it is "clicked" (touched)
        if (isPreAndroid4) {
            var audio = document.getElementById("audio");
            if (audio) audio.addEventListener("touchstart", function() { audio.play(); }, false);
            var video = document.getElementById("video");
            if (video) video.addEventListener("touchstart", function() { video.play(); }, false);
        }
    </script>

</body>
</html>
